<!DOCTYPE html>
<html lang="en">
<head>
    <title>地图导航</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style rel="stylesheet" type="text/css">
        /*去除正文区域的间距*/
        body{margin:0 auto; padding:0}

        /*地图加载区域样式*/
        #container{
            width:100%;
            height:100vh;
        }

    </style>
</head>
<body>
<!--地图容器-->
<div id="container"></div>

<!--设置全局脚本变量：地图使用的密钥-->
<script type="text/javascript">
    //原型链：在当前web打开网页的窗口对象window中，添加变量
    window._AMapSecurityConfig = {
        //【安全密钥】
        securityJsCode = "dae19aa4270674943d8c02ea321810d5"
    }
</script>

<!--获取整个地图的脚本:
    直接访问官网下载到本地的，下载时，提供key
-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=6bafd12d9fb58b427d7ec04539473905"
></script>

<!--初始化地图-->
<script type="text/javascript">
    //初始化地图，遇到new就会创建实例，页面中就会按照上面下载的脚本
    //进行处理，绘制地图
    //这里采用的都是var：因为后续还有方法需要使用到这些对象
    //因此，用var，进行变量提升，默认通过原型链，挂载到当前位置的最顶层
    //按照现在的情况，最顶层对象就是：window

    //地图初始化后，缩放比例
    var zoom = 18

    //创建地图对象，设置默认的定位经纬度
    var map = new AMap.Map(
      "container",               //显示容器的id值：上面的那个div
      {
         zoom: zoom,                     //默认的初始化显示比例
         //center: [121.47592, 31.237687]  //中心点-上海学校总部
         center: [116.397658, 39.908028] //中心点-北京天安门
      }
    );



    //当页面加载完毕时
    window.onload = function(){
        //调用鸿蒙端Proxy代理过来的指定方法
        window.swift.setCurrentLocation()
    };


    //【定位方法】：
    // 方法负责进行具体内容的设置与操作，由-鸿蒙应用负责调用
    function setLocation(lng, lat) {
        //第一步：设置地图的中心点
        map.setZoomAndCenter(zoom, [lng, lat]);

        //第二步：设置中心点的Marker标记
        var marker = new AMap.Marker({
            map: map,                               //基于那个地图对象
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            position: [lng, lat]                    //经纬度
        });
        //添加到地图中
        map.add(marker);

        //第三步：为地图添加插件功能
        //自动搜索且标记出周围的核心地标
        map.plugin(['AMap.PlaceSearch'], function(){
                //搜索参数配置对象
                var PlaceSearchOptions = {
                    map: map,            //地图位置
                    pageSize: 4,         //搜索出的结果，默认10个
                    pageIndex: 1,        //显示第几页
                    extensions: 'base'   //返回的详情-只要基本信息
                };

                //创建插件-搜索功能类-功能实例
                var MSearch = new AMap.PlaceSearch(PlaceSearchOptions);

                //设置监听：(具体对象操作，'完成状态'，回调)-没有执行
                AMap.Event.AddListener( MSearch, 'complete', (res)=>{
                    //将搜索到的结果，通过事件调用
                    //作为参数，传递到鸿蒙应用中
                    window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                });

                //正式执行搜索，在指定的坐标周围
                MSearch.searchNearBy('停车场', [lng,lat]);
            }
        );
    }

</script>
</body>
</html>
